<template lang="">
  <div class="center">
    <div class="main" style="border: 1px solid #fff;height: auto;background-color: #fff;border-radius: 10px;">
      <div class="title"
        style="text-align: left;margin-top:30px;border-left: 3px solid #fe0100;width: 300px;height: 25px;">
        <h3 style="color:#fe0100 ;font-weight: 500;font-size: 18px;padding-left: 15px;">联系人详情</h3>
      </div>

      <div class="bx" style="border: 0px solid #000;width: 550px;margin: 40px 20px;">
        <ul style="list-style: none;padding: 0;margin:0;">
          <li v-model="linkmanData" style="text-align: left;margin-left: 15px">
            <p>
              <span class="title" style="margin-left: 30px;">姓名 </span>
              <span class="blue">{{linkmanData.name}}</span>
            </p>
            <p>
              <span class="title" style="margin-left: 30px;">部门 </span>
              <span>{{linkmanData.department}}</span>
            </p>
            <p>
              <span class="title" style="margin-left: 30px;">职务 </span>
              <span>{{linkmanData.duty}}</span>
            </p>
            <p>
              <span class="title">联系电话 </span>
              <span>{{linkmanData.phone}}</span>
            </p>
            <p>
              <span class="title" style="margin-left: 30px;">性别 </span>
              <span >{{linkmanData.sex == "0" ? "男" :"女"}}</span>
            </p>
            <p>
              <span class="title" style="margin-left: 30px;">年龄 </span>
              <span>{{linkmanData.age}}</span>
            </p>
            <p>
              <span class="title" style="margin-left: 30px;">籍贯 </span>
              <span>{{linkmanData.nativePlace}}</span>
            </p>
            <p>
              <span class="title">毕业院校 </span>
              <span>{{linkmanData.college}}</span>
            </p>
            <p>
              <span class="title">家庭地址</span>
              <span>{{linkmanData.adress}}</span>
            </p>
            <p>
              <span class="title" style="margin-left: 30px;">简历</span>
              <span >{{linkmanData.otherMessage}}</span>
            </p>
          </li>
        </ul>
        <!-- <el-button @click="type = 1">编辑</el-button> -->
        <el-button style="width:200px" @click="dialogVisible = true" type="danger" class="button">添加联系人家庭成员</el-button>
      </div>
    <!-- 家庭成员列表 -->
    <div class="tabs" style="border: 0px solid #000;border-radius: 10px;overflow: hidden;">
      <el-table :data="familyList" stripe style="width: 100%;text-align: center;cursor: pointer;">
        <el-table-column prop="name" label="姓名" width="150">
        </el-table-column>
        <el-table-column prop="relation" label="关系" width="150">
        </el-table-column>
         <el-table-column prop="age" label="年龄" width="100">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100" :formatter="columnFormat">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="150">
        </el-table-column>
        <el-table-column prop="company" label="单位" width="150">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="120">
        </el-table-column>
        <el-table-column prop="adress" label="家庭地址" width="200">
        </el-table-column>
        <el-table-column prop="message" label="其他信息" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="updateButton(scope.row)">修改</el-button>
            <el-button @click="deleteFamily(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange" :page-size="size"
        :current-page="current" :total="total" layout="prev, pager, next">
      </el-pagination>
    </div>
    <!-- 家庭成员添加 -->
    <div class="add">
      <el-dialog title="家庭成员添加" :visible.sync="dialogVisible">
        <el-form>
          <el-form-item label="姓名">
            <el-input v-model="familyData.name" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="关系" placeholder="请输入内容">
            <el-input v-model="familyData.relation">
            </el-input>
          </el-form-item>
          <el-form-item label="性别" placeholder="请输入内容">
            <el-radio-group v-model="familyData.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄" placeholder="请输入内容">
            <el-input v-model="familyData.age">
            </el-input>
          </el-form-item>
          <el-form-item label="生日" placeholder="请输入内容">
            <el-date-picker v-model="familyData.birthday" type="date" placeholder="选择日期">
            </el-date-picker>

          </el-form-item>
          <el-form-item label="单位/学校" placeholder="请输入内容">
            <el-input v-model="familyData.company">
            </el-input>
          </el-form-item>
          <el-form-item label="电话" placeholder="请输入内容">
            <el-input v-model="familyData.phone">
            </el-input>
          </el-form-item>  
          <el-form-item label="地址" placeholder="请输入内容">
            <el-input v-model="familyData.adress">
            </el-input>
          </el-form-item>
          <el-form-item label="其他信息" placeholder="请输入内容">
            <el-input v-model="familyData.message"></el-input>
          </el-form-item>
          <el-form-item label="备注" placeholder="请输入内容">
            <el-input v-model="familyData.remark">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px; cursor: pointer; ">
          <el-button @click="dialogVisible = false" type="danger" class="button">取 消</el-button>
          <el-button type="danger" class="button" @click="addFamily()">添 加</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="add">
      <el-dialog title="联系人修改" :visible.sync="dialogVisible1">
        <el-form>
          <el-form-item label="姓名">
            <el-input v-model="updateRow.name" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="关系" placeholder="请输入内容">
            <el-input v-model="updateRow.relation">
            </el-input>
          </el-form-item>
          <el-form-item label="性别" placeholder="请输入内容">
            <el-radio-group v-model="updateRow.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄" placeholder="请输入内容">
            <el-input v-model="updateRow.age">
            </el-input>
          </el-form-item>
          <el-form-item label="生日" placeholder="请输入内容">
            <el-date-picker v-model="updateRow.birthday" type="date" placeholder="选择日期">
            </el-date-picker>

          </el-form-item>
          <el-form-item label="单位/学校" placeholder="请输入内容">
            <el-input v-model="updateRow.company">
            </el-input>
          </el-form-item>
          <el-form-item label="电话" placeholder="请输入内容">
            <el-input v-model="updateRow.phone">
            </el-input>
          </el-form-item>  
          <el-form-item label="地址" placeholder="请输入内容">
            <el-input v-model="updateRow.adress">
            </el-input>
          </el-form-item>
          <el-form-item label="其他信息" placeholder="请输入内容">
            <el-input v-model="updateRow.message"></el-input>
          </el-form-item>
          <el-form-item label="备注" placeholder="请输入内容">
            <el-input v-model="updateRow.remark">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px; cursor: pointer; ">
          <el-button type="danger" class="button" @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="danger" class="button" @click="updateFamily()">修改</el-button>
        </div>
      </el-dialog>
    </div>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        current: 1,
        size: 7,
        total: 0,
        linkmanData: {},
        familyList:[],
        familyData: {   
          familyId:'', 
          name: '',
          relation: '',
          phone: '',
          adress: '',
          message: '',
          remark: '',
          age: '',
          sex: '',
          company: '',
          linkmanId:'',
          birthday: ''
        },
        
        updateRow: {},
        type: 0,
        userId: '',
        dialogVisible: false,
        dialogVisible1: false,
      }
    },
    mounted() {
      this.familyData.linkmanId = this.$route.query.linkmanId
      this.linkmanId = this.$route.query.linkmanId
      this.getLinkmanDetail()
    },
    methods: {
      handleCurrentChange(val) {
        this.current = val
        this.getFamilyList()
      },
      columnFormat(row, column) {
        switch (column.property) {
          case "sex":
            var sex = ["男", "女"]
            var value = sex[Number(row[column.property])]
            break;
        }
        return value;
      },
       // 获取联系人信息
       getLinkmanDetail() {
        var data = {
          current: 1,
          size: 1,
          linkmanId: this.linkmanId
        }
        this.$API.linkman.reqLinkmanList(data).then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length != 0) {
              this.linkmanData = res.data.data[0]
              console.log(this.linkmanData)
              this.getFamilyList()
            } else {
              this.linkmanData = []
            }
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      // 联系人家庭成员列表
      getFamilyList() {
        var data = {
          current: 1,
          size: 1,
          linkmanId: this.linkmanData.linkmanId
        }
        this.$API.linkman.reqFamilyList(data).then(res => {
          if (res.data.code == 200) {
            this.familyList = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })
      },
      // 添加联系人家庭成员
      addFamily() {
        var data = this.familyData;
        if (data.name == '') {
          this.$message("名称不能为空")
        } else {
          this.$API.linkman.reqAddFamily(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功！");
              this.dialogVisible = false;
              this.getFamilyList();
            } else {
              this.$message.error("添加失败！");
            }
          })
        }
      },
      // 删除联系人
      deleteFamily(row) {
        this.$confirm("确认删除联系人吗？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          var data = {
            familyId: row.familyId
          }
          this.$API.linkman.deleteFamily(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("删除成功！");
              this.getFamilyList()
            } else {
              this.$message.error("删除失败！");
            }
          })
        })
      },
      updateButton(row) {
        console.log(row)
        this.updateRow = row;

        this.dialogVisible1 = true;
      },
      updateFamily() {
        var data = this.updateRow
        this.$API.linkman.updateFamily(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("修改成功！");
            this.dialogVisible1 = false;
            this.getFamilyList()
          } else {
            this.$message.error("修改失败！");
          }
        })
      },
    },   
  }

</script>
<style scoped>
  @import "../../../style/style.css";
 
  .el-input,
  .el-select,
  .el-date-picker {
    border: 1px solid #b6b6b6;
    border-radius: 50px;
    overflow: hidden;
    width: 300px;
    position: relative;
    top: 0;
  }
  .bx>>>.el-form-item__content {
    width: 300px !important;
    /* border: 1px solid #000; */
  }

  .bx>>>.el-form-item__label {
    font-size: 16px;
  }

  .bx>>>.el-textarea__inner {
    height: 150px;
  }

  .bx>>>.el-input__suffix {
    left: 150px;

  }

  .bx>>>.el-form-item {
    margin-bottom: 10px;
  }

  .bx ul li p .title {
    color: #888;
    margin-right: 20px;

  }

  .bx ul li p .blue {
    color: #fe0100;
    /* margin-right: 20px; */
  }
 
  .add>>>.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    border-radius: 30px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    box-sizing: border-box;
    width: 500px;
    overflow: hidden;
  }

  .add>>>.el-input__suffix {
    text-align: right;
  }

  .add>>>.el-select .el-input {
    width: 100%;
  }

  .add>>>.el-form-item__content {
    text-align: right;
    padding-right: 50px;
  }

  .add>>>.el-radio-group {
    margin-right: 100px;
    /* margin-top: 30px; */
  }
</style>
